<template>
  <div class="app-main-container">
    <div
      class="edit-entrance"
      style="
        display: flex;
        margin: 0 auto -20px;
        justify-content: space-between;
        flex-wrap: wrap;
      "
    >
      <div class="app-main-title">
        会员详情
        <div class="goback" @click="goBack">
          <i class="el-icon-refresh-left" /> 返回上一页
        </div>
      </div>
    </div>
    <div style="background: #f4f7fc; padding: 10px 10px 0">
      <div class="vipinfo_li vip-info">
        <el-image
          shape="circle"
          style="width: 50px; height: 50px; border-radius: 50%"
          fit="cover"
          class="flex-cc"
          :src="memberInfo.showAvatar ? memberInfo.showAvatar : default_pic"
          :preview-src-list="[
            memberInfo.showAvatar ? memberInfo.showAvatar : default_pic,
          ]"
        >
          <div slot="error" class="image-slot">
            <i class="el-icon-picture" />
          </div>
        </el-image>
        <div class="name-phone">
          <div class="name">
            <span>{{ memberInfo.nickName }}</span>
            <span v-if="memberInfo.sex === '1'" class="sex_wrap">男</span>
            <span v-else-if="memberInfo.sex === '2'" class="sex_wrap">女</span>
            <span v-else class="sex_wrap">保密</span>
          </div>
          <div class="phone df_ac">
            <span class="mr30">手机号：{{ memberInfo.phone }}</span>
            <span class="mr30">身份证：{{ memberInfo.identityNumber }}</span>
            <span class="mr30">真实姓名：{{ memberInfo.realName }}</span>
            <span class="mr30">积分余额：{{ memberInfo.integral }}</span>
            <span class="mr30 df_ac">
              <span>人脸照片：</span>
              <el-image
                fit="contain"
                class="flex-cc"
                :src="memberInfo.showFaceUrl"
                :preview-src-list="[memberInfo.showFaceUrl]"
                style="width: 40px;vertical-align: top;height: 40px;"
              >
                <div slot="error" class="image-slot">
                  <i class="el-icon-picture" />
                </div>
              </el-image></span>
          </div>
        </div>
      </div>
      <!-- <div class="info_li">
        <span>真实姓名：</span>{{ memberInfo.realName }}
      </div>
      <div class="info_li">
        <span>身份证：</span>{{ memberInfo.identityNumber }}
      </div>
      <div class="info_li">
        <span>性别：</span>{{
          memberInfo.sex == 0
            ? "保密"
            : memberInfo.sex == 1
              ? "男"
              : memberInfo.sex == 2
                ? "女"
                : ""
        }}
      </div>
      <div class="info_li">
        <span>积分余额：</span>{{ memberInfo.integral }}
      </div>
      <div class="info_li flex-c">
        <span>人脸：</span>
        <el-image
          fit="contain"
          class="flex-cc"
          :src="memberInfo.showFaceUrl"
          :preview-src-list="[memberInfo.showFaceUrl]"
        >
          <div slot="error" class="image-slot">
            <i class="el-icon-picture" />
          </div>
        </el-image>
      </div> -->
    </div>
    <div class="mt20">
      <el-button
        v-if="meta.indexOf('ChangeMemberCardType') > -1"
        type="primary"
        @click="changeCardType(memberInfo.id)"
      >变更卡类型</el-button>
      <el-button
        v-if="meta.indexOf('MemberAdjustAmount') > -1"
        type="primary"
        @click="banlanceMotify(memberInfo.id)"
      >余额调整</el-button>
      <el-button
        v-if="meta.indexOf('MemberWithdrawal') > -1"
        type="primary"
        @click="withDraw(memberInfo.id)"
      >提现</el-button>
      <el-button
        v-if="meta.indexOf('VipEdit') > -1"
        @click="motifyMemberInfo(memberInfo.id)"
      >编辑</el-button>
    </div>
    <el-tabs v-model="activeName" type="card" class="mt20" @tab-click="handleClick">
      <el-tab-pane label="账号信息" name="1">
        <div class="doumee-filter">
          <div class="margin-t-10 account-info-li">
            <span class="title">会员卡号：</span>
            <span>{{ memberInfo.number }}</span>
          </div>
          <div class="margin-t-10 account-info-li">
            <span class="title">卡面卡号：</span>
            <span>{{ memberInfo.chipNumber }}</span>
          </div>
          <div class="margin-t-10 account-info-li">
            <span class="title">芯片卡号：</span>
            <span>{{ memberInfo.entityNumber }}</span>
          </div>
          <div class="margin-t-10 account-info-li">
            <span class="title">会员卡类型：</span>
            <span>{{ memberInfo.cardName }}</span>
          </div>
          <div class="margin-t-10 account-info-li">
            <span class="title">会员卡余额：</span>
            <span>{{ memberInfo.rechargeMoney }}</span>
          </div>
          <div class="margin-t-10 account-info-li">
            <span class="title">累计消费金额：</span>
            <span>{{ memberInfo.totalConsume }}</span>
          </div>
          <div class="margin-t-10 account-info-li">
            <span class="title">状态：</span>
            <span>{{
              memberInfo.status == "0"
                ? "禁用"
                : memberInfo.status == "1"
                  ? "启用"
                  : ""
            }}</span>
          </div>
          <div class="margin-t-10 account-info-li">
            <span class="title">赠送余额：</span>
            <span>{{ memberInfo.giveMoney }}</span>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="套餐项目" name="2">
        <el-table
          ref="table"
          v-loading="listLoading"
          :data="list"
          element-loading-text="Loading"
          border
          fit
          :header-row-class-name="'table-header'"
          class="doumee-element-table"
        >
          <el-table-column
            align="center"
            label="套餐名称"
            prop="mealsName"
            min-width="140"
            show-overflow-tooltip
          />
          <el-table-column align="center" label="类型" min-width="100">
            <template v-slot="scope">
              <span v-if="scope.row.type === '0'">门票次卡</span>
              <span v-if="scope.row.type === '1'">门票期限卡</span>
              <span v-if="scope.row.type === '2'">预定次卡</span>
              <span v-if="scope.row.type === '3'">课程预约次卡</span>
              <span v-if="scope.row.type === '4'">课程期限卡</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="有效期"
            prop="indate"
            min-width="80"
          />
          <!-- <el-table-column align="center" label="有效期" min-width="200">
            <template slot-scope="scope">
              {{ scope.row.validityStartTime }} ~ {{ scope.row.validityEndTime }}
            </template>
          </el-table-column> -->
          <el-table-column
            label="过期时间"
            prop="validityEndTime"
            min-width="160"
            align="center"
          />
          <el-table-column
            label="次数"
            prop="num"
            min-width="80"
            align="center"
          />
          <el-table-column
            label="剩余次数"
            prop="remainNum"
            min-width="80"
            align="center"
          />
          <el-table-column
            label="赠送次数"
            prop="giveNum"
            min-width="80"
            align="center"
          />
          <el-table-column
            label="剩余赠送次数"
            prop="remainGiveNum"
            min-width="120"
            align="center"
          />
          <el-table-column align="center" prop="statusName" label="状态" min-width="80" />
          <el-table-column
            label="购买场馆"
            prop="venueName"
            min-width="150"
            align="center"
          />
          <el-table-column
            label="购买时间"
            prop="receiveTime"
            min-width="170"
            align="center"
          />
          <el-table-column
            label="操作"
            min-width="80"
            align="center"
            fixed="right"
          >
            <template slot-scope="scope">
              <div class="flex-cc">
                <el-button
                  v-preventReClick
                  type="text"
                  @click="motifyMeals(scope.row)"
                >修改</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <div class="flex-cc doumee-pagination">
          <Paginations
            :integrated="false"
            :total="total"
            :page="filters.page"
            @current-change="handleCurrentChange"
          />
          <!-- <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            :current-page.sync="filters.page"
            hide-on-single-page
            @current-change="handleCurrentChange"
          /> -->
        </div>
      </el-tab-pane>
      <el-tab-pane label="余额变动记录" name="3">
        <el-table
          ref="tableb"
          v-loading="orderListLoading"
          :data="orderList"
          element-loading-text="Loading"
          border
          fit
          :header-row-class-name="'table-header'"
          class="doumee-element-table"
        >
          <el-table-column
            align="center"
            label="消费形式"
            prop="businessName"
            min-width="100"
          />
          <el-table-column
            align="center"
            label="收支类型"
            min-width="80"
            prop="type"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.type == '0'">收入</span>
              <span v-if="scope.row.type == '1'" class="secondColor">支出</span>
            </template>
          </el-table-column>
          <!-- <el-table-column
            align="center"
            label="收支金额"
            prop="money"
            min-width="200"
          /> -->
          <el-table-column
            align="center"
            label="充值金额"
            prop="rechargeMoney"
            min-width="80"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.type == '0'">{{ scope.row.rechargeMoney }}</span>
              <template v-if="scope.row.type == '1'">
                <span v-if="scope.row.rechargeMoney>0" class="secondColor">- {{ scope.row.rechargeMoney }}</span>
                <span v-else>{{ scope.row.rechargeMoney }}</span>
              </template>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="赠送金额"
            prop="giveMoney"
            min-width="80"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.type == '0'">{{ scope.row.giveMoney }}</span>
              <template v-if="scope.row.type == '1'">
                <span v-if="scope.row.giveMoney>0" class="secondColor">- {{ scope.row.giveMoney }}</span>
                <span v-else>{{ scope.row.giveMoney }}</span>
              </template>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="充值余额"
            prop="afterRecharge"
            min-width="80"
          />
          <el-table-column
            align="center"
            label="赠送余额"
            prop="afterGive"
            min-width="80"
          />
          <el-table-column
            align="center"
            label="消费场馆"
            prop="venueName"
            min-width="120"
          />
          <el-table-column
            align="center"
            label="消费时间"
            prop="createTime"
            min-width="160"
          />
          <el-table-column
            align="center"
            label="操作员"
            prop="creator"
            min-width="100"
            show-overflow-tooltip
          />
        </el-table>
        <div class="flex-cc doumee-pagination">
          <Paginations
            :integrated="false"
            :total="orderTotal"
            :page="paginationIntegral.orderPage"
            @current-change="handleOrderCurrentChange"
          />
        </div>
      </el-tab-pane>
      <el-tab-pane label="积分记录" name="5">
        <el-table
          ref="tableb"
          v-loading="IntegralRecordLoading"
          :data="IntegralRecordList"
          element-loading-text="Loading"
          border
          fit
          :header-row-class-name="'table-header'"
          class="doumee-element-table"
        >
          <el-table-column
            align="center"
            label="消费用户"
            min-width="200"
            prop="name"
            show-overflow-tooltip
          />
          <el-table-column
            align="center"
            label="消费类型"
            min-width="200"
            prop="sourceName"
            show-overflow-tooltip
          />
          <el-table-column
            align="center"
            label="收支类型"
            min-width="100"
            prop="type"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.type == '1'">收入</span>
              <span v-if="scope.row.type == '2'" class="secondColor">支出</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="支出/收入积分"
            prop="integral"
            min-width="140"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.type == '1'">{{ scope.row.integral }}</span>
              <template v-if="scope.row.type == '2'">
                <span v-if="scope.row.integral>0" class="secondColor">- {{ scope.row.integral }}</span>
                <span v-else>{{ scope.row.integral }}</span>
              </template>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="支出/收入时间"
            prop="createTime"
            min-width="160"
          />
          <el-table-column
            align="center"
            label="订单编号"
            min-width="220"
            show-overflow-tooltip
            prop="orderId"
          />
        </el-table>
        <div class="flex-cc doumee-pagination">
          <Paginations
            :integrated="false"
            :total="IntegralRecordTotal"
            :page="paginationIntegral.page"
            @current-change="currentChangeIntegral"
          />
        </div>

      </el-tab-pane>
      <!-- <el-tab-pane label="人脸照片" name="5">
        <div v-if="memberInfo.faceModel" class="checked_tag_face">
          <el-image
            fit="contain"
            :src="!memberInfo.faceModel ? '' : memberInfo.faceModel.faceUrl"
            :preview-src-list="[
              !memberInfo.faceModel ? '' : memberInfo.faceModel.faceUrl
            ]"
          />
          <i class="el-icon-error" @click="delFaceImg(memberInfo.id)" />
        </div>
      </el-tab-pane> -->
      <el-tab-pane label="学员信息" name="7">
        <template v-if="activeName === '7'">
          <Student :member-id="memberId" />
        </template>
      </el-tab-pane>
      <el-tab-pane label="精彩瞬间" name="6">
        <template v-if="activeName === '6'">
          <Brilliant :member-id="memberId" />
        </template>

        <div class="tags_container">
          <div
            v-for="(item, index) in albumAllList"
            :key="index"
            class="checked_tag"
          >
            <div class="time">
              {{ formatTimeStr(item.dateInfo) }}
            </div>
            <div class="image_video">
              <el-image
                fit="contain"
                :src="item.showUrl"
                :preview-src-list="[item.showUrl]"
              />
              <img
                v-if="item.videoUrl"
                :src="videoPlay_icon"
                class="paly_icon"
                width="50px"
                height="50px"
                @click="SeeVideo(item.showUrl, item.videoUrl)"
              >
              <i class="el-icon-error" @click="delAlbum(item.id)" />
            </div>
          </div>
        </div>
        <div class="flex-cc doumee-pagination">
          <el-pagination
            background
            layout="prev, pager, next"
            :total="albumTotal"
            :current-page.sync="filters.page"
            hide-on-single-page
            @current-change="handleAlbumCurrentChange"
          />
        </div>
      </el-tab-pane>
      <el-tab-pane label="操作日志" name="4">
        <el-table
          v-loading="operateListLoading"
          :data="operateLogList"
          element-loading-text="Loading"
          border
          fit
          :header-row-class-name="'table-header'"
          class="doumee-element-table"
        >
          <el-table-column
            align="center"
            label="操作时间"
            prop="createTime"
            min-width="160"
          />
          <el-table-column
            align="center"
            label="操作员"
            prop="creatorName"
            min-width="120"
            show-overflow-tooltip
          />
          <el-table-column
            align="center"
            label="操作类型"
            prop="type"
            min-width="100"
          />
          <el-table-column
            align="center"
            label="备注"
            prop="remark"
            min-width="160"
            show-overflow-tooltip
          />
        </el-table>
        <div class="flex-cc doumee-pagination">
          <Paginations
            :integrated="false"
            :total="logTotal"
            :page="filters.logPage"
            @current-change="handleOrderCurrentChange"
          />
          <!-- <el-pagination
            background
            layout="prev, pager, next"
            :total="logTotal"
            :current-page.sync="filters.logPage"
            hide-on-single-page
            @current-change="handleOrderCurrentChange"
          /> -->
        </div>
      </el-tab-pane>
    </el-tabs>
    <el-dialog
      title="套餐修改"
      :visible.sync="isShow"
      :close-on-click-modal="modalDialog"
      :close-on-press-escape="modalDialog"
    >
      <el-form ref="form" :model="param" :rules="rules" label-width="100px">
        <el-form-item v-if="param.type == 0" label="剩余次数" prop="remainNum">
          <el-input
            v-model="param.remainNum"
            placeholder="请输入次数"
            onkeyup="value=value.replace(/[^\d.]/g, '').replace(/\.{2,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.').replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3').replace(/^\./g, '')"
            oninput="if(value<0) { value = ''} else {value=value.replace(/[^\d.]/g, '').replace(/\.{2,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.').replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3').replace(/^\./g, '')}"
          />
        </el-form-item>
        <el-form-item label="有效期(天)" prop="indate">
          <el-input
            v-model="param.indate"
            placeholder="请输入有效期"
            onkeyup="value=value.replace(/[^\d.]/g, '').replace(/\.{2,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.').replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3').replace(/^\./g, '')"
            oninput="if(value<0) { value = ''} else {value=value.replace(/[^\d.]/g, '').replace(/\.{2,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.').replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3').replace(/^\./g, '')}"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancleMotify">取消</el-button>
        <el-button
          v-preventReClick
          type="primary"
          @click="confirmMotify"
        >确定</el-button>
      </div>
    </el-dialog>

    <!-- 提现 -->
    <el-dialog
      :visible.sync="showWithdraw"
      :center="true"
      :show-close="false"
      :close-on-click-modal="modalDialog"
      :close-on-press-escape="modalDialog"
    >
      <div slot="title" class="withdraw-flex">
        <span>储值卡提现</span>
        <ElStep :active="active" :step-list="stepList" class="step" />

        <!-- :step-function="stepFunction" -->
        <el-button type="text" icon="el-icon-close" @click="cancelWithdraw" />
      </div>
      <div v-if="active == 0" style="display: flex; flex-wrap: wrap">
        <el-form
          ref="ruleForm"
          :model="memberInfo"
          :rules="rules"
          style="width: 100%"
          label-width="150px"
        >
          <el-form-item align="center" label="充值余额：">
            <el-input v-model="memberInfo.rechargeMoney" type="text" disabled />
          </el-form-item>
          <el-form-item align="center" label="赠送余额：">
            <el-input v-model="memberInfo.giveMoney" type="text" disabled />
          </el-form-item>

          <div class="line-style" />
          <el-form-item align="center" label="余额提现：">
            <el-input
              v-model="memberInfo.withdrawMoney"
              onkeyup="value=value.replace(/[^\d.]/g, '').replace(/\.{2,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.').replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3').replace(/^\./g, '')"
              oninput="if(value<0) { value = ''} else {value=value.replace(/[^\d.]/g, '').replace(/\.{2,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.').replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3').replace(/^\./g, '')}"
              type="text"
              placeholder="请输入提现金额"
            />
          </el-form-item>
          <el-form-item align="center" label="赠送余额提现：">
            <el-input
              v-model="memberInfo.withdrawGiveMoney"
              onkeyup="value=value.replace(/[^\d.]/g, '').replace(/\.{2,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.').replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3').replace(/^\./g, '')"
              oninput="if(value<0) { value = ''} else {value=value.replace(/[^\d.]/g, '').replace(/\.{2,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.').replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3').replace(/^\./g, '')}"
              type="text"
              placeholder="请输入提现金额"
            />
          </el-form-item>
        </el-form>
      </div>
      <div v-if="active == 1" class="withdraw-space-box">
        <div class="box-item payprice">
          <div class="priceinfo">
            <div class="item-title">提现</div>
            <div class="info_li">
              <span>充值金额</span>
              <span>￥{{
                memberInfo.withdrawMoney ? memberInfo.withdrawMoney : 0
              }}</span>
            </div>

            <div class="info_li">
              <span>赠送金额</span>
              <span>￥{{
                memberInfo.withdrawGiveMoney
                  ? memberInfo.withdrawGiveMoney
                  : 0
              }}</span>
            </div>
            <div class="line-style" />
            <div class="info_li">
              <span class="total">小计：￥{{ withdrawTotalMoney() }}</span>
            </div>
          </div>
        </div>
        <div class="box-item paytype">
          <div class="item-title">提现方式</div>
          <div class="types">
            <el-button
              v-for="(item, index) in payTypes"
              :key="index"
              class="pay-style"
              :class="
                payTypes[index].value == payType
                  ? 'slelect-pay-style'
                  : 'normal-pay-style'
              "
              type="text"
              @click="changePayType(item)"
            >{{ item.name }}
            </el-button>
          </div>
          <div class="line-style" />
          <el-input
            v-model="memberInfo.mark"
            type="text"
            placeholder="请输入备注内容"
          />
          <div class="total-price">￥{{ withdrawTotalMoney() }}</div>
          <div class="title">合计费用</div>
        </div>
      </div>
      <span v-if="active == 0" slot="footer">
        <el-button @click="cancelWithdraw">取消</el-button>
        <el-button type="primary" @click="nextStep">下一步</el-button>
      </span>
      <span v-if="active == 1" slot="footer">
        <el-button @click="prevStep">上一步</el-button>
        <el-button
          v-preventReClick
          type="primary"
          @click="confirmWithdraw"
        >提现</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="余额调整"
      :visible.sync="showBanlanceAdjust"
      :close-on-click-modal="modalDialog"
      :close-on-press-escape="modalDialog"
      width="600px"
    >
      <el-form ref="form" :model="banlance" :rules="rules">
        <el-form-item label="充值余额：" label-width="100px">
          <el-input v-model="memberInfo.rechargeMoney" type="text" disabled />
        </el-form-item>
        <el-form-item label="赠送余额：" label-width="100px">
          <el-input v-model="memberInfo.giveMoney" type="text" disabled />
        </el-form-item>
        <el-form-item label="调整方式：" label-width="100px">
          <el-radio v-model="banlance.type" label="0">减少</el-radio>
          <el-radio v-model="banlance.type" label="1">增加</el-radio>
        </el-form-item>
        <el-form-item label="充值余额：" label-width="100px" prop="amount">
          <el-input
            v-model="banlance.amount"
            onkeyup="value=value.replace(/[^\d.]/g, '').replace(/\.{2,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.').replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3').replace(/^\./g, '')"
            oninput="if(value<0) { value = ''} else {value=value.replace(/[^\d.]/g, '').replace(/\.{2,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.').replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3').replace(/^\./g, '')}"
            type="text"
            placeholder="请输入调整充值余额"
          />
        </el-form-item>
        <el-form-item label="赠送余额：" label-width="100px" prop="giveAmount">
          <el-input
            v-model="banlance.giveAmount"
            :disabled="!zsmoney"
            onkeyup="value=value.replace(/[^\d.]/g, '').replace(/\.{2,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.').replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3').replace(/^\./g, '')"
            oninput="if(value<0) { value = ''} else {value=value.replace(/[^\d.]/g, '').replace(/\.{2,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.').replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3').replace(/^\./g, '')}"
            type="text"
            placeholder="请输入调整赠送余额"
          />
        </el-form-item>
        <el-form-item label="备注：" prop="note" label-width="100px">
          <el-input
            v-model="banlance.note"
            maxlength="200"
            placeholder="请输入备注"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showBanlanceAdjust = false">取消</el-button>
        <el-button
          v-preventReClick
          type="primary"
          @click="confirmAdjust"
        >确定</el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="视频播放"
      :close-on-click-modal="modalDialog"
      :close-on-press-escape="modalDialog"
      :visible.sync="videoVisible"
      width="600px"
      top="20vh !important"
      :before-close="handleClose"
    >
      <video
        id="videoJS_1"
        ref="myvideo"
        class="video-js vjs-big-play-centered vjs-fluid"
        controls
        preload="auto"
        :poster="videoParam.videoShowUrl"
        :src="videoParam.videoPlayUrl"
      >
        <!-- <source type="video/mp4" :src="videoParam.videoPlayUrl"> -->
      </video>
    </el-dialog>

    <CardTypeChange ref="CardTypeChangeRef" />
    <VipEdit ref="VipEditRef" @submit="getDetail" />
  </div>
</template>

<script>
// 直接引入videojs会报错
import _videojs from 'video.js'
const videojs = window.videojs || _videojs
import 'video.js/dist/video-js.css'

import ElStep from '@/components/elStep/elStep.vue'
import Brilliant from './brilliant'
import Student from './student'

import {
  memberDetailInfo,
  memberMealsList,
  configList,
  memberMoneyRecordInfo,
  memberIntegralRecord,
  updateMemberMeals,
  memberWithdraw,
  memberBehaviorRecord,
  adjustAmount,
  removeAlbum,
  removeFacePhoto,
  listAlbumAll
} from '@/api'
import store from '@/store'
import CardTypeChange from '@/views/vipList/components/cardTypeChange'
import VipEdit from '@/views/vipCard/vipEdit/index.vue'
export default {
  // name: 'VipDetails',
  components: {
    ElStep,
    Brilliant,
    Student,
    CardTypeChange,
    VipEdit
  },
  data() {
    return {
      isShowCartType: false,
      paginationIntegral: {
        rows: 10,
        page: 1
      },
      IntegralRecordLoading: false,
      IntegralRecordList: [],
      IntegralRecordTotal: 0,
      modalDialog: store.getters.dialog,
      videoPlay_icon: require('@/icons/png/videoPlay.png'),
      edit_info: require('@/icons/png/ic_edit.png'),
      ic_withdraw: require('@/icons/png/ic_withdraw.png'),
      ic_balance_edit: require('@/icons/png/ic_balance_edit.png'),
      default_pic: require('@/icons/png/default_pic.png'),
      meta: [],
      isShow: false,
      memberInfo: {
        faceModel: {}
      },
      memberId: this.$route.query.id,
      param: {},
      list: [],
      orderList: [],
      operateLogList: [],
      albumAllList: [],
      pagination: {
        page: 1,
        rows: 10
      },
      total: 0,
      logTotal: 0,
      orderTotal: 0,
      albumTotal: 0,
      filters: {
        firstQueryTime: '',
        page: 1,
        orderPage: 1,
        logPage: 1
      },
      listLoading: true,
      orderListLoading: true,
      operateListLoading: true,
      albumAllListLoading: true,
      showWithdraw: false,
      showBanlanceAdjust: false,
      activeName: '1',
      rules: {
        remainNum: [
          { required: true, message: '请输入剩余次数', trigger: 'blur' }
        ],
        indate: [{ required: true, message: '请输入有效期', trigger: 'blur' }],
        type: [{ required: true, message: '请选择调整方式', trigger: 'blur' }],
        amount: [
          { required: true, message: '请输入调整充值余额', trigger: 'blur' }
        ],
        giveAmount: [
          { required: true, message: '请输入调整赠送余额', trigger: 'blur' }
        ],
        note: [{ required: true, message: '请输入备注', trigger: 'blur' }]
      },
      active: 0,
      zsmoney: false,
      stepList: [
        { name: '金额录入', index: 1, title: '' },
        { name: '提现', index: 2, title: '' }
      ],
      payTypes: [
        { name: '微信', value: 0 },
        { name: '支付宝', value: 1 },
        { name: '现金', value: 2 }
      ],
      payType: 0,
      banlance: { type: '0', amount: '0', giveAmount: '0' },
      videoOptions: {
        controls: true,
        src: 'xxxxxxxxx.mp4' // url地址
      },
      videoVisible: false,
      player: null,
      videoParam: {},
      videoShowUrl: '',
      videoPlayUrl: ''
    }
  },
  created() {
    this.meta = this.$route.meta.buttons || []
    this.filters.firstQueryTime = this.setTempDate()
    this.getDetail()
    this.getDefalutConfig()
    // this.initVideo()
  },
  methods: {
    getDefalutConfig() {
      configList({ param: { type: '6' }})
        .then((res) => {
          if (res.errorCode !== '000000') return
          const list = res.recordList
          const objb = list.find(item => item.code === 'PRESENT_MONEY_CONFIG')
          if (objb && objb.name) {
            this.zsmoney = true
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    goBack() {
      this.$router.replace('/vipList/vipList')
    },
    /**
     * 播放器初始化
     */
    // initVideoJS() {
    //   const vm = this

    //   try {
    //     const video = document.getElementById('videoJS_1')
    //     const options = {
    //       controls: true, // 是否显示播放器控件
    //       autoplay: true, // 是否自动播放
    //       width: 864, // 视频的宽度
    //       height: 486, // 视频的高度
    //       aspectRatio: '16:9', // 视频的宽高比
    //       poster: this.videoParam.videoShowUrl, // 视频的封面
    //       controlBar: { // 底部的控制栏组件
    //         currentTimeDisplay: true, // 当前播放事件
    //         timeDivider: true, // 当前播放时间与总时间的斜杆分隔符
    //         durationDisplay: true, // 是否显示总时间
    //         remainingTimeDisplay: false, // 是否显示剩下的时间，该选项与是否显示总时间二选一
    //         volumePanel: { // 音量组件
    //           inline: true // 可以调整方向为纵向或者横向
    //         },
    //         children: [ // children数组这是controlbar的子元素顺序
    //           {
    //             name: 'playToggle'
    //           },
    //           {
    //             name: 'volumePanel'
    //           },
    //           {
    //             name: 'currentTimeDisplay'
    //           },
    //           {
    //             name: 'progressControl'
    //           },
    //           {
    //             name: 'durationDisplay'
    //           },
    //           {
    //             name: 'playbackRateMenuButton',
    //             playbackRates: [0.5, 1, 1.5, 2]
    //           },
    //           {
    //             name: 'FullscreenToggle'
    //           }
    //         ]
    //       },
    //       sources: [ // 设置视频的播放源
    //         {
    //           src: this.videoParam.videoPlayUrl,
    //           type: `video/mp4`, // 注意有些类型不兼容如：video/mov
    //           poster: this.videoParam.videoShowUrl // 视频封面
    //         }
    //       ]
    //     }

    //     this.player = videoJS(video, options, function() {
    //       this.on('error', () => {
    //         // 视频错误监听事件
    //       })
    //       this.on('loadstart', () => {
    //         // 视频开始加载数据监听事件
    //       })
    //       this.on('canplaythrough', () => {
    //         // 视频可以播放监听事件
    //       })
    //       this.on('playing', () => {
    //       //  视频正在播放监听事件
    //       })
    //       this.on('stalled', () => {
    //         console.log('网络异常')
    //       })
    //       this.on('waiting', () => {
    //         // 视频正在加载事件
    //       })
    //     })
    //   } catch (err) {
    //     console.log(`initVideoJs Player error => ${err}`)
    //   }
    // },
    initVideo() {
      // 页面dom元素渲染完毕，执行回调里面的方法
      const options = {
        controls: true,
        // 自动播放属性,muted:静音播放
        autoplay: true,
        // 建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
        preload: 'auto',
        // 设置视频播放器的显示宽度（以像素为单位）
        // width: "800px",
        // 设置视频播放器的显示高度（以像素为单位）
        // height: "400px",
        controlBar: {
          playToggle: true
        }
      }
      this.player = videojs(this.$refs.myvideo, options, function() {
        const _this = this
        this.on('timeupdate', function() {
          // this.playTime = this.currentTime()
          // const playTime = this.currentTime()
          // setTimeout(function() {
          //   localStorage.setItem('cacheTime', playTime)
          // }, 500)

          // const time = localStorage.getItem('cacheTime')
          // if (this.currentTime() - Number(time) > 2) {
          //   this.current = Number(time)
          //   this.currentTime(this.current)
          // } else {
          //   this.current = this.currentTime()
          // }
        })

        this.on('ended', function() {
          console.log('ended', '播放结束')
        })

        this.on('progress', function() {
          console.log('progress', '开始播放')
        })

        this.on('error', function() {
          _this.$message.warning('异常，无法播放')
        })
      })
    },
    setTempDate() {
      // 获取时间
      var myDate = new Date()
      return (
        myDate.getFullYear() +
        '-' +
        (myDate.getMonth() + 1) +
        '-' +
        myDate.getDate() +
        ' ' +
        myDate.getHours() +
        ':' +
        myDate.getMinutes() +
        ':' +
        myDate.getSeconds()
      )
    },
    getDetail() {
      memberDetailInfo({ param: { memberId: this.$route.query.id }})
        .then((res) => {
          if (res.errorCode !== '000000') return
          this.memberInfo = res.record
        })
        .catch((err) => {
          console.log(err)
        })
    },
    formatTimeStr(date) {
      return date.replace(/^(\d{4})(\d{2})(\d{2})$/, '$1-$2-$3')
    },
    // 获取精彩瞬间图片
    getAlbumAllList() {
      listAlbumAll({
        pagination: {
          firstQueryTime: this.setTempDate(),
          page: this.filters.page,
          rows: 10
        },
        param: {
          venueId: sessionStorage.getItem('venueId'),
          memberId: this.$route.query.id
        },
        userId: sessionStorage.getItem('userId')
      })
        .then((res) => {
          this.albumAllListLoading = false
          if (res.errorCode !== '000000') return
          this.albumAllList = res.recordList
          this.albumTotal = res.totalCount
        })
        .catch((err) => {
          this.albumAllListLoading = false
          console.log(err)
        })
    },
    // 获取会员套餐项目
    getMealProjectList() {
      memberMealsList({
        pagination: {
          firstQueryTime: this.setTempDate(),
          page: this.filters.page,
          rows: 10
        },
        param: {
          memberId: this.$route.query.id
        },
        userId: sessionStorage.getItem('userId')
      })
        .then((res) => {
          this.listLoading = false
          if (res.errorCode !== '000000') return
          this.list = res.recordList
          this.total = res.totalCount
          this.$refs.table.doLayout()
        })
        .catch((err) => {
          this.listLoading = false
          console.log(err)
        })
    },
    // 获取消费记录列表
    getConsumeRecordList() {
      memberMoneyRecordInfo({
        pagination: {
          firstQueryTime: this.setTempDate(),
          page: this.filters.orderPage,
          rows: 10
        },
        param: {
          memberId: this.$route.query.id
        },
        userId: sessionStorage.getItem('userId')
      })
        .then((res) => {
          this.orderListLoading = false
          if (res.errorCode !== '000000') return
          this.orderList = res.recordList
          this.orderTotal = res.totalCount
          this.$refs.tableb.doLayout()
        })
        .catch((err) => {
          this.orderListLoading = false
          console.log(err)
        })
    },
    getmemberIntegralRecord() {
      const data = {
        pagination: this.paginationIntegral,
        param: {
          memberId: this.$route.query.id
        }
      }
      this.IntegralRecordLoading = true
      memberIntegralRecord(data).then(res => {
        this.IntegralRecordLoading = false
        if (res.errorCode !== '000000') return
        const list = res.recordList
        this.IntegralRecordList = list
        this.IntegralRecordTotal = res.totalCount
      }, () => {
        this.IntegralRecordLoading = false
      })
    },
    currentChangeIntegral(val) {
      this.paginationIntegral.page = val
      this.getmemberIntegralRecord()
    },
    handleSizeChangeIntegral(val) {
      this.paginationIntegral.rows = val
      this.getmemberIntegralRecord()
    },
    // 获取操作日志列表
    getLogRecordList() {
      memberBehaviorRecord({
        pagination: {
          firstQueryTime: this.setTempDate(),
          page: this.filters.logPage,
          rows: 10
        },
        param: {
          memberId: this.$route.query.id
        },
        userId: sessionStorage.getItem('userId')
      })
        .then((res) => {
          this.operateListLoading = false
          if (res.errorCode !== '000000') return
          this.operateLogList = res.recordList
          this.logTotal = res.totalCount
        })
        .catch((err) => {
          this.operateListLoading = false
          console.log(err)
        })
    },
    handleCurrentChange(val) {
      this.filters.page = val
      this.getMealProjectList()
    },
    handleAlbumCurrentChange(val) {
      this.filters.page = val
      this.getAlbumAllList()
    },
    handleOrderCurrentChange(val) {
      if (this.activeName === '3') {
        this.filters.orderPage = val
        this.getConsumeRecordList()
      } else if (this.activeName === '4') {
        this.filters.logPage = val
        this.getLogRecordList()
      }
    },
    handleClick(tab, event) {
      this.activeName = tab.name
      this.tabChange()
    },
    tabChange() {
      if (this.activeName === '1') {
        this.getDetail()
      } else if (this.activeName === '2') {
        this.getMealProjectList()
      } else if (this.activeName === '3') {
        this.getConsumeRecordList()
      } else if (this.activeName === '4') {
        this.getLogRecordList()
      } else if (this.activeName === '5') {
        this.getmemberIntegralRecord()
      } else if (this.activeName === '6') {
        // this.getAlbumAllList()
      }
    },
    delAlbum(id) {
      this.$confirm('此操作将删除该图片, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          removeAlbum({
            param: { idList: [id] }
          }).then((res) => {
            this.$message.success('删除成功')
            this.filters.page = 1
            this.getAlbumAllList()
          })
        })
        .catch(() => {
          console.log('已取消删除')
        })
    },
    delFaceImg(memberId) {
      this.$confirm('此操作将删除该人脸图片, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          removeFacePhoto({
            param: { memberId }
          }).then((res) => {
            this.$message.success('删除成功')
            this.getDetail()
          })
        })
        .catch(() => {
          console.log('已取消删除')
        })
    },
    motifyMemberInfo(id) {
      if (!id) {
        this.$message.error('获取会员信息失败')
        return
      }
      this.$refs.VipEditRef.isShow = true
      this.$refs.VipEditRef.getDetail(id)
      // this.$router.push({ name: 'VipEdit', query: { id: id }})
    },
    motifyMeals(param) {
      param = JSON.stringify(param)
      param = JSON.parse(param)
      this.param = param
      this.isShow = true
    },
    cancleMotify() {
      this.param = {}
      this.isShow = false
    },
    confirmMotify() {
      const { param } = this
      this.$refs['form'].validate((valid) => {
        if (valid) {
          updateMemberMeals({
            param,
            userId: sessionStorage.getItem('userId')
          })
            .then((res) => {
              this.isShow = false
              if (res.errorCode === '000000') {
                this.getMealProjectList()
              }
            })
            .catch((err) => {
              console.log(err)
            })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    withDraw(id) {
      this.showWithdraw = true
    },
    cancelWithdraw() {
      this.showWithdraw = false
    },
    withdrawTotalMoney() {
      let money = 0
      let giveMoney = 0
      if (this.memberInfo.withdrawGiveMoney) {
        giveMoney = parseFloat(this.memberInfo.withdrawGiveMoney)
      }
      if (this.memberInfo.withdrawMoney) {
        money = parseFloat(this.memberInfo.withdrawMoney)
      }
      return parseFloat(money + giveMoney).toFixed(2)
    },
    nextStep() {
      this.payTypes = [
        { name: '微信', value: 0 },
        { name: '支付宝', value: 1 },
        { name: '现金', value: 2 }
      ]
      this.payType = 2
      if (
        !this.memberInfo.withdrawMoney &&
        !this.memberInfo.withdrawGiveMoney
      ) {
        this.$message.error('请输入提现金额')
        return
      }
      if (
        this.memberInfo.withdrawMoney === 0 &&
        this.memberInfo.withdrawGiveMoney === 0
      ) {
        this.$message.error('请输入正确的提现金额')
        return
      }
      if (
        parseFloat(this.memberInfo.withdrawMoney) >
        parseFloat(this.memberInfo.rechargeMoney)
      ) {
        this.$message.error('充值金额提现超额')
        return
      }
      if (
        parseFloat(this.memberInfo.withdrawGiveMoney) >
        parseFloat(this.memberInfo.giveMoney)
      ) {
        this.$message.error('赠送余额提现超额')
        return
      }
      if (
        (!this.memberInfo.withdrawMoney ||
          this.memberInfo.withdrawMoney === 0) &&
        this.memberInfo.withdrawGiveMoney !== 0
      ) {
        this.payTypes.splice(0, 2)
        this.payType = 2
      }
      this.active++
    },
    prevStep() {
      this.active--
    },
    changePayType(item) {
      if (this.payType === item.value) {
        return
      }
      this.payType = item.value
    },
    confirmWithdraw() {
      memberWithdraw({
        param: {
          memberId: this.memberInfo.id,
          amount: this.memberInfo.withdrawMoney,
          giveAmount: this.memberInfo.withdrawGiveMoney,
          type: this.payType,
          note: this.memberInfo.mark
        }
      })
        .then((res) => {
          if (res.errorCode === '000000') {
            this.$message.success('提现成功')
            this.active = 0
            this.showWithdraw = false
            this.getDetail()
            this.tabChange()
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    changeCardType(id) {
      this.$refs.CardTypeChangeRef.isShowCartType = true
      this.$refs.CardTypeChangeRef.getCardList(id)
      // this.$router.push({ name: 'CardTypeChange', query: { id }})
    },
    banlanceMotify() {
      this.showBanlanceAdjust = true
      this.banlance = { type: '0', amount: '0', giveAmount: '0' }
    },
    confirmAdjust() {
      if (!this.banlance.amount && !this.banlance.giveAmount) {
        this.$message.error('请输入调整金额')
        return
      }
      if (this.banlance.amount === 0 && this.banlance.giveAmount === 0) {
        this.$message.error('请输入调整金额')
        return
      }

      // const param = this.banlance
      this.$refs.form.validate((v) => {
        if (v) {
          adjustAmount({
            param: {
              amount: this.banlance.amount,
              giveAmount: this.banlance.giveAmount,
              note: this.banlance.note,
              type: this.banlance.type,
              memberId: this.memberInfo.id
            }
          })
            .then((res) => {
              if (res.errorCode === '000000') {
                this.$message.success('调整成功')
                this.showBanlanceAdjust = false
                this.getDetail()
                this.tabChange()
              }
            })
            .catch((err) => {
              console.log(err)
            })
        } else {
          console.log('error submit!!')
        }
      })
    },
    SeeVideo(coverUrl, playUrl) {
      // this.videoShowUrl = coverUrl
      // this.videoPlayUrl = playUrl
      this.$set(this.videoParam, 'videoShowUrl', coverUrl)
      this.$set(this.videoParam, 'videoPlayUrl', playUrl)
      // if (this.player) {
      //   this.player.pause()
      //   this.player.setAttribute('src', playUrl)
      //   this.player.load()
      //   this.player.play()
      // }
      this.videoVisible = true
    },
    handleClose() {
      // this.videoShowUrl = ''
      // this.videoPlayUrl = ''
      this.$set(this.videoParam, 'videoShowUrl', '')
      this.$set(this.videoParam, 'videoPlayUrl', '')
      this.videoVisible = false
    }
  }
}
</script>
<style lang="scss" scoped>
@import "@/styles/variables.scss";
.sex_wrap{
  color: $primaryColor;
  border:1px solid $primaryColor;
  padding: 0 5px;
  border-radius: 2px;
  margin-left: 10px;
}
.info_li {
  width: 20%;
  font-size: 14px;
  color: #333;
  span {
    color: #666;
    display: inline-block;
  }
  .el-image {
    width: 40px;
    vertical-align: top;
    height: 40px;
  }
}
.hans {
  color: #435ebe;
  cursor: pointer;
}
.vipinfo_li {
  width: 100%;
  font-size: 14px;
  margin-bottom: 10px;
  color: #333;
  .el-image {
    width: 100px;
    vertical-align: center;
    height: 100px;
  }
}
.vip-info {
  display: flex;
  justify-content: left;
  .name-phone {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: left;
    margin-left: 10px;
  }
}
.account-info-li {
  width: 33.33%;
  font-size: 16px;
  margin-bottom: 10px;
  color: #333;
  justify-content: center;
  text-align: left;
  .title {
    color: #999;
    font-size: 15px;
    margin-right: 2px;
    text-align: right;
    width: 7em;
    display: inline-block;
  }
}
.withdraw-flex {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  position: relative;
  flex-wrap: wrap;
  justify-content: space-between;
  .el-button {
    margin-bottom: 10px;
  }
  .step {
    width: 50%;
  }
}
.withdraw-space-box {
  display: flex;
  position: relative;
  &::after {
    content: "";
    display: block;
    position: absolute;
    height: 100%;
    width: 1px;
    top: 0;
    left: 35%;
    transform: translate(-35%);
    background-color: #ccc;
  }
  .box-item {
    display: flex;
    position: relative;
  }
  .box-item.payprice {
    width: 35%;
    padding-right: 30px;
    .priceinfo {
      width: 100%;
      height: 180px;
      background-color: rgb(243, 245, 251, 1);
      border: solid 2px #fff;
      .item-title {
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 30px;
        padding-left: 10px;
        padding-top: 10px;
      }
      .info_li {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding-left: 10px;
        padding-right: 10px;
        padding-bottom: 10px;
        .span {
          display: inline-block;
          width: 7em;
        }
        .total {
          color: #435ebe;
          justify-content: space-around;
        }
      }
    }
  }
  .box-item.paytype {
    padding-left: 10px;
    width: 65%;
    display: flex;
    flex-direction: column;
    .item-title {
      font-size: 18px;
      font-weight: bold;
      margin-bottom: 30px;
      padding-left: 10px;
      padding-top: 10px;
    }
    .types {
      padding-top: 20px;
      padding-left: 10px;
      padding-bottom: 100px;
      .pay-style {
        padding: 0 10px;
        height: 30px;
        font-size: 15px;
        line-height: 1px;
        vertical-align: middle;
      }
      .slelect-pay-style {
        background-color: #1943a9;
        color: #fff;
      }
      .normal-pay-style {
        border: 1px solid #d8d8d8;
        background-color: #fff;
        color: #222;
      }
    }
    .total-price {
      color: rgb(227, 89, 83, 1);
      font-size: 28px;
      font-weight: bold;
      text-align: center;
      margin-top: 10px;
    }
    .title {
      text-align: center;
    }
  }
}
.tags_container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: center;
  margin-top: 20px;
  // margin: 6px auto;
}
.checked_tag {
  margin-right: 15px;
  margin-bottom: 15px;
  text-align: left;
  white-space: normal;

  /* 如果不设置margin的话：一行5个li，就设置成 flex: 0 0 20%;*/
  /* flex: 0 0 20%; */ /*表示当前子项目宽度为20%，父级空间有剩余，不会放大，空间不够用时，不会缩小*/
  flex: 0 0 18%;
  .image_video {
    position: relative;
    .el-image {
      background-color: #e5e5e5;
    }
    .paly_icon {
      position: absolute;
      top: 50%;
      left: 50%;
      margin-left: -25px;
      margin-top: -25px;
    }
    i {
      position: absolute;
      margin-left: -15px;
      font-size: 16px;
      color: rgb(24, 7, 7);
    }
  }
}
.checked_tag_face {
  margin-right: 15px;
  margin-bottom: 15px;
  text-align: left;
  white-space: normal;

  .el-image {
    width: 350px;
    height: 214px;
    background-color: #e5e5e5;
  }
  i {
    position: absolute;
    // margin-top: 5px;
    margin-left: -15px;
    font-size: 16px;
    color: rgb(24, 7, 7);
  }
}
/*修改播放器样式*/
.video-js {
  width: 120% !important;
  height: 100% !important;
}
.video-js .vjs-big-play-button {
  background-color: rgba(0, 0, 0, 0.45);
  font-size: 3em;
  border-radius: 50%;
  height: 1.5em !important;
  line-height: 1.5em !important;
  margin-top: -1em !important;
}
.vjs-paused .vjs-big-play-button,
.vjs-paused .vjs-big-play-button {
  display: block !important;
}
.myVideo-dimensions {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}
.vjs-poster {
  background-size: 100% 100% !important;
}
</style>
